<template>
    <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#52a7ff"
            text-color="#fff"
            active-text-color="white"
            @select="handleSelect"
    >
        <el-menu-item index="1">全部</el-menu-item>
        <el-menu-item index="2">已确认</el-menu-item>
        <el-menu-item index="3">已退款</el-menu-item>
    </el-menu>
    <div class="demo-collapse" style="margin-top: 2.5vw">
        <el-collapse>
            <template v-for="order in orderList">
                <el-collapse-item :title="'订单编号：'+order.id">
                    <ul class="order-info-box" >
                        <li>
                            <span>订单创建时间</span>
                            <span>{{timeFormate(order.createTime)}}</span>
                        </li>
                        <li>
                            <span>订单操作时间</span>
                            <span>{{timeFormate(order.updateTime)}}</span>
                        </li>
                        <li>
                            <span>订单状态</span>
                            <span>{{orderStateFormate(order.orderState)}}</span>
                        </li>
                        <li>
                            <span>用户手机号</span>
                            <span>{{order.customerUserPhone}}</span>
                        </li>
                        <li style="margin-bottom: 0">订单细则：</li>
                        <template v-for="lineItem in order.lineItemDTOS">
                            <li>
                                <span>{{lineItem.itemName}} x {{lineItem.quantity}}</span>
                                <span>{{lineItem.quantity*lineItem.shopShopItemPrice}}￥</span>
                            </li>
                        </template>
                        <li>
                            <span>价格</span>
                            <span>{{order.orderTotal }}</span>
                        </li>
                    </ul>
                    <template v-if="order.orderState === 1">
                        <el-button @click="updateOrderState(order.id,2)" type="success" :icon="Check" circle />
                        <el-button @click="updateOrderState(order.id,3)" type="danger" :icon="Failed" circle />
                    </template>
                </el-collapse-item>
            </template>


        </el-collapse>
    </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {Check, Failed} from '@element-plus/icons-vue'
import {useRoute} from "vue-router";
import {getPaidOrderByOrderStateAPI, updateOrderByOrderStateAPI} from "../api/api.js";
import {getSessionStorage} from "../common.js";

const route = useRoute()
const shopId = ref(route.params.shopId)
const activeIndex = ref('1')
const orderList = reactive([])
const {userPhone,token} = getSessionStorage("user")
const getOrdersByShops = async ()=>{
    const queryData = new FormData()
    queryData.append("shopId",shopId.value)
    queryData.append("orderState",activeIndex.value)
    await getPaidOrderByOrderStateAPI(token,queryData).then(res=>{
        orderList.splice(0,orderList.length)
        if (res.data.data){
            orderList.push(...res.data.data)
        }
        console.log(orderList)
    })
}
//切换导航
const handleSelect = (key) => {
    activeIndex.value = key
    getOrdersByShops();
}

const timeFormate = (timestamp)=>{
    let date = new Date(timestamp);
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，然后确保两位数显示
    let day = date.getDate().toString().padStart(2, '0'); // 确保两位数显示的日
    return `${year}/${month}/${day}`;
}

const orderStateFormate = (orderState)=>{
    let state = '已支付'
    if (orderState === 2) state='已确认'
    else if (orderState === 3) state='已退款'
    return state;
}


const updateOrderState =async (orderId,orderState)=>{
    const data = new FormData()
    data.append("shopId",shopId.value)
    data.append("orderId",orderId)
    data.append("orderState",orderState)
    await updateOrderByOrderStateAPI(token,data).then(res=>{
        if (res.data.data){
            alert("修改成功！")
        }else {
            alert("修改失败")
        }
    })
    await getOrdersByShops()
}

onMounted(()=>{
    getOrdersByShops();
})
</script>

<style scoped>
.el-menu-demo{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.order-info-box{
    border: 1px solid #d4e0f1;
    width: 100%;
}
.order-info-box li{
    margin-bottom: 2.5vw;
    width: 95%;
    padding-left: 1.2vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #666;
}
.order-info-box li span{
    color: #666;
    font-size: 3vw;
}

</style>